<template>
	<view class="top">
		<view class="back-btn" @click="backPage()">
			<view class="back-icon"></view>
		</view>
		<view style="color: white;text-align: center;margin-bottom: 30rpx;">卡券管理</view>
		<button class="btn" @click="toAddCoupon()">
			<image src="/static/加号@2x.png"></image>
			新增优惠券
		</button>
		<uni-card class="card">
			<uni-section>
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" style="border-radius: 80rpx;" />
				</view>
				<view class="content">
					<view v-if="current === 0">
						<view class="items mb20">
							<view class="items_left">
								<view class="items_left_top mb30">
									满200元可用
								</view>
								<view class="items_left_bottom">
									<text style="font-size: 35rpx;">¥</text>
									20
								</view>
							</view>
							<view class="items_right">
								<view class="items_right_top" style="color: black;margin-bottom: 10rpx;">
									优惠券名称:新用户专享体验券
								</view>
								<view class="items_right_mid mb20" style="color: gray;font-size: 24rpx;">
									有效期：2020.3.18-2023.4.18
								</view>
								<view class="items_right_bottom" style="color: gray;font-size: 24rpx;margin-bottom: 30rpx;">
									每人限领一张
								</view>
							</view>
						</view>
						<view class="items mb20">
							<view class="items_left">
								<view class="items_left_top mb30">
									满200元可用
								</view>
								<view class="items_left_bottom">
									<text style="font-size: 35rpx;">¥</text>
									20
								</view>
							</view>
							<view class="items_right">
								<view class="items_right_top" style="color: black;margin-bottom: 10rpx;">
									优惠券名称:新用户专享体验券
								</view>
								<view class="items_right_mid mb20" style="color: gray;font-size: 24rpx;">
									有效期：2020.3.18-2023.4.18
								</view>
								<view class="items_right_bottom" style="color: gray;font-size: 24rpx;">
									每人限领一张
								</view>
							</view>
						</view>
						<view class="items mb20">
							<view class="items_left">
								<view class="items_left_top mb30">
									满200元可用
								</view>
								<view class="items_left_bottom">
									<text style="font-size: 35rpx;">¥</text>
									20
								</view>
							</view>
							<view class="items_right">
								<view class="items_right_top" style="color: black;margin-bottom: 10rpx;">
									优惠券名称:新用户专享体验券
								</view>
								<view class="items_right_mid mb20" style="color: gray;font-size: 24rpx;">
									有效期：2020.3.18-2023.4.18
								</view>
								<view class="items_right_bottom" style="color: gray;font-size: 24rpx;">
									每人限领一张
								</view>
							</view>
						</view>
					</view>
					<view v-if="current === 1">
						<view class="items mb20">
							<view class="items_left2">
								<view class="items_left_top mb30">
									满200元可用
								</view>
								<view class="items_left_bottom">
									<text style="font-size: 35rpx;">¥</text>
									20
								</view>
							</view>
							<view class="items_right2">
								<view class="items_right_top" style="color: gray;margin-bottom: 10rpx;">
									优惠券名称:新用户专享体验券
								</view>
								<view class="items_right_mid mb20" style="color: gray;font-size: 24rpx;">
									有效期：2020.3.18-2023.4.18
								</view>
								<view class="items_right_bottom">
									<view class="items_right_bottom_left">
										每人限领一张
									</view>
									<image src="/static/已结束.png"></image>
								</view>
							</view>
						</view>
						<view class="items mb20">
							<view class="items_left2">
								<view class="items_left_top mb30">
									满200元可用
								</view>
								<view class="items_left_bottom">
									<text style="font-size: 35rpx;">¥</text>
									20
								</view>
							</view>
							<view class="items_right2">
								<view class="items_right_top" style="color: gray;margin-bottom: 10rpx;">
									优惠券名称:新用户专享体验券
								</view>
								<view class="items_right_mid mb20" style="color: gray;font-size: 24rpx;">
									有效期：2020.3.18-2023.4.18
								</view>
								<view class="items_right_bottom">
									<view class="items_right_bottom_left">
										每人限领一张
									</view>
									<image src="/static/已结束.png"></image>
								</view>
							</view>
						</view>
					</view>
				</view>


			</uni-section>
		</uni-card>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 定义响应式数据
	const items = ref(['进行中', '已结束']);
	

	function backPage(){
		uni.navigateBack()
	}

	const current = ref(0);
	const colorIndex = ref(0);
	const activeColor = ref('#007aff');
	const styleType = ref('button');

	function toAddCoupon(){
		uni.navigateTo({
			url:'/pages/index/kaquan/coupon/coupon'
		})
	}

	const onClickItem = (e) => {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex;
		}
	};
</script>

<style scoped>
	@import url('@/common/app.css');

	.mb20 {
		margin-bottom: 20rpx;
	}
	.mb30{
		margin-bottom: 30rpx;
	}

	.card {
		margin: 0;
		height: 1200rpx;
	}

	.uni-padding-wrap {
		padding: 0px 30px;
		margin-bottom: 30rpx;
	}

	.btn {
		width: 90%;
		height: 70rpx;
		line-height: 70rpx;
		color: #007aff;
		border-radius: 100rpx;
	}

	.btn image {
		width: 30rpx;
		height: 30rpx;
	}

	.items {
		width: 100%;
		height: 220rpx;
		display: flex;
		justify-content: start;
	}

	.items_left {
		width: 30%;
		padding: 30rpx 10rpx;
		background-color: #ff7531;
		text-align: center;
		color: white;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}

	.items_left_bottom {
		font-size: 80rpx;
		font-weight: 700;
	}

	.items_right {
		width: 70%;
		background-color: #fff3eb;
		padding: 30rpx 15rpx;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}

	.items_left2 {
		width: 30%;
		padding: 30rpx 10rpx;
		background-color: #ffbb99;
		text-align: center;
		color: #fefefe;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}

	.items_right2 {
		width: 70%;
		background-color: #f2f2f2;
		padding: 30rpx 15rpx;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}

	.items_right_bottom {
		color: gray;
		font-size: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	image {
		width: 140rpx;
		height: 60rpx;
	}
	.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}	
	.back-icon { width: 30px; height: 30px;}	
	.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 80rpx; left: 47rpx; transform: translate(-50%, -50%); }
	.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 70rpx; left: 30rpx;}	 
</style>